<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>基于Hugo快速搭建个人博客 | Hts0000 | 个人博客</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noodp" />
<meta name="Description" content="Hts0000 | 个人博客">
<link rel="next" href="https://hts0000.github.io/2020/02/hugo%E6%97%A5%E5%B8%B8%E4%BD%BF%E7%94%A8%E4%BC%98%E5%8C%96/" />
<link rel="canonical" href="https://hts0000.github.io/2020/02/%E5%9F%BA%E4%BA%8Ehugo%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="基于Hugo快速搭建个人博客"/>
<meta name="twitter:description" content=""/>
<script type="application/ld+json">
    {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "headline": "基于Hugo快速搭建个人博客",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https:\/\/hts0000.github.io\/2020\/02\/%E5%9F%BA%E4%BA%8Ehugo%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2\/"
    },
    
        "image": {
            "@type": "ImageObject",
            "url": "https:\/\/hts0000.github.io\/cover.png",
            "width":  800 ,
            "height":  600 
        },
    
    "genre": "posts",
    
        "keywords": "hugo, 分享",
    
    "wordcount":  2404 ,
    "url": "https:\/\/hts0000.github.io\/2020\/02\/%E5%9F%BA%E4%BA%8Ehugo%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2\/",
    
        "datePublished": "2020-02-15T13:02:13\x2b08:00",
    
    
        "dateModified": "2020-02-15T13:02:13\x2b08:00",
    
    
        "license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.",
    
    
        "publisher": {
            "@type": "Organization",
            "name": "XXXX",
            "logo": {
            "@type": "ImageObject",
            "url": "https:\/\/hts0000.github.io\/logo.png",
            "width":  127 ,
            "height":  40 
            }
        },
    
    
    "description": ""
    }
    </script>
<link rel="stylesheet" href="/css/style.min.css">
<link rel="stylesheet" href="/css/lib/fontawesome-free/all.min.min.css">

<link rel="stylesheet" href="/css/lib/animate/animate.min.min.css">

    </head>
    <body>
        <script>
            window.isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
            window.isDark && document.body.classList.add('dark-theme');
        </script>
        <div class="wrapper">
            <nav class="navbar">
    <div class="navbar-container">
        <div class="navbar-header animated bounceIn">
            <a href="https://hts0000.github.io/">Hts0000 | 个人博客</a>
        </div>
        <div class="navbar-menu">
            
            
                <a class="menu-item" href="https://hts0000.github.io/posts" title="">文章</a>
            
                <a class="menu-item" href="https://hts0000.github.io/tags" title="">标签</a>
            
                <a class="menu-item" href="https://hts0000.github.io/categories" title="">分类</a>
            
                <a class="menu-item" href="https://hts0000.github.io/about" title="">关于</a>
            
            <a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180 fa-fw"></i></a>
        </div>
    </div>
</nav>
<nav class="navbar-mobile">
     <div class="navbar-container">
        <div class="navbar-header">
            <div class="navbar-header-title animated bounceIn">
                <a href="https://hts0000.github.io/">Hts0000 | 个人博客</a>
            </div>
            <div class="menu-toggle" id="menu-toggle">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="navbar-menu" id="mobile-menu">
            
            
                <a class="menu-item" href="https://hts0000.github.io/posts" title="">文章</a>
            
                <a class="menu-item" href="https://hts0000.github.io/tags" title="">标签</a>
            
                <a class="menu-item" href="https://hts0000.github.io/categories" title="">分类</a>
            
                <a class="menu-item" href="https://hts0000.github.io/about" title="">关于</a>
            
            <a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180 fa-fw"></i></a>
        </div>
    </div>
</nav><main class="main">
                <div class="container">
                    
    
    
    

    <article class="post-warp">
        <h1 class="post-title animated flipInX">基于Hugo快速搭建个人博客</h1>

        <div class="post-meta">
            <div class="post-meta-main">
                <a class="author" href="https://hts0000.github.io/" rel="author"><i class="fas fa-user-circle fa-fw"></i>hts0000&nbsp;</a>
                <span class="post-category">
                        收录于
                        <i class="far fa-folder fa-fw"></i><a href="https://hts0000.github.io/categories/%E5%88%86%E4%BA%AB/">分享</a>
                            
                    </span>
            </div>
            <div class="post-meta-other">
                <i class="far fa-calendar-alt fa-fw"></i><time datetime=2020-02-15>2020-02-15</time>&nbsp;
                <i class="fas fa-pencil-alt fa-fw"></i>约 2404 字&nbsp;
                <i class="far fa-clock fa-fw"></i>预计阅读 5 分钟&nbsp;</div>
        </div>

        

        

        <div class="post-content">
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            <p>转载请注明出处：<code>https://hts0000.github.io/</code></p>
<p>欢迎与我联系：<code>hts_0000@sina.com</code></p>
<a class="post-dummy-target" id="1-引言"></a><h1>1 引言</h1>
<p>本文用于记录基于HUGO搭建个人博客的步骤和注意事项，阅读时长大概30分钟。
适用于以下人员：</p>
<ul>
<li>想搭建博客</li>
<li>想了解hugo</li>
<li>闲着没事</li>
</ul>
<a class="post-dummy-target" id="2-准备阶段"></a><h1>2 准备阶段</h1>
<p><strong>在开始搭建博客前，希望你已经准备好以下工具，以便能快速的跟上本篇文章。</strong></p>
<ul>
<li><a href="https://git-scm.com/downloads">Git Bash</a></li>
<li><a href="https://notepad-plus-plus.org/downloads/">Notepad++</a></li>
<li><a href="https://code.visualstudio.com/">VSCode</a></li>
</ul>
<p><strong>文章将会从如下三个大步骤进行展开。</strong></p>
<ul>
<li>基于HUGO的本地博客</li>
<li>定制本地博客</li>
<li>使用GitHub展示博客内容</li>
</ul>
<a class="post-dummy-target" id="3-基于hugo的本地博客"></a><h1>3 基于HUGO的本地博客</h1>
<p><strong>想要在本地搭建一个基于HUGO的博客，大致有如下三步。</strong></p>
<ol>
<li>安装hugo</li>
<li>获取一个hugo主题</li>
<li>启动hugo</li>
</ol>
<p><strong>第一步，安装hugo。</strong></p>
<p>前往hugo的github仓库获取对应操作系统的<a href="https://github.com/gohugoio/hugo/releases">hugo执行程序</a>。</p>
<p>完成之后打开cmd终端，输入hugo version，如能正确显示hugo的版本即为安装成功。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/00.PNG" alt="hugo安装成功" title="hugo安装成功"></p>
<p>安装成功后在cmd终端执行如下命令，在D盘生成hugo博客站点MyBlog。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">hugo new site D:\MyBlog
</code></pre></td></tr></table>
</div>
</div><p><strong>第二步，获取HUGO主题。</strong></p>
<p>hugo的主题是博客的门面，博客的风格和样式都基于主题。如果有前端编程的能力，也可以自行设计属于自己的主题，或者前往<a href="https://themes.gohugo.io/">hugo主题商店</a>下载现成的主题。这里以<a href="https://themes.gohugo.io/loveit/">LoveIt
</a>主题为例。</p>
<p>点击Download前往LoveIt的github仓库进行下载。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/01.PNG" alt="下载LoveIt主题" title="下载LoveIt主题">
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/02.png" alt="下载LoveIt主题" title="下载LoveIt主题"></p>
<p>将下载好的压缩包解压到<code>D:\MyBlog\themes</code>目录下，并将目录重命名为LoveIt。</p>
<p>将<code>D:\MyBlog\themes\LoveIt\exampleSite\zh</code>目录下的所有文件和<code>D:\MyBlog\themes\LoveIt\exampleSite\static</code>目录复制到<code>D:\MyBlog\</code>目录下。</p>
<ul>
<li>zh目录：LoveIt主题的中文配置及界面内容</li>
<li>zh\config.toml：LoveIt主题的集中配置文件</li>
<li>zh\content目录：LoveIt主题的默认页面内容</li>
<li>static目录：LoveIt主题的图包</li>
</ul>
<p>使用Notepad++或其他文本编辑工具打开config.toml文件，将
<del>staticDir = [&quot;../static&rdquo;, &ldquo;../../assets/others&rdquo;]</del>
改成staticDir = [&quot;/static&rdquo;, &ldquo;../assets/others&rdquo;]。</p>
<p><strong>第三步，启动本地博客。</strong></p>
<p>在cmd终端执行如下命令，启动监听。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">hugo server -D --config D:\MyBlog\config.toml
</code></pre></td></tr></table>
</div>
</div><p>在浏览器访问URL:<code>localhost:1313</code>，可以查看本地博客。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/03.png" alt="下载LoveIt主题" title="下载LoveIt主题"></p>
<a class="post-dummy-target" id="4-定制本地博客"></a><h1>4 定制本地博客</h1>
<p><strong>定制一个充满个人元素的博客大概分为如下三步。</strong></p>
<ol>
<li>个性化的博客标题和个人介绍</li>
<li>个性化的头像和图标</li>
<li>个性化的博客内容</li>
</ol>
<p><strong>第一步，定制个人的博客标题和介绍。</strong></p>
<p>关于如何修改博客的标题等，<code>D:\MyBlog\config.toml</code>文件内作者有非常完善的注释，大家多修改多尝试（先备份），这里不细讲。</p>
<p><strong>第二步，个性化头像和图标。</strong></p>
<p>点击<a href="https://realfavicongenerator.net/">Favicon Generator</a>，打开<code>Select your Favicon image</code>上传一张你喜欢的图片。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/06.PNG" alt="Favicon Generator生成图标" title="Favicon Generator生成图标"></p>
<p>上传之后成功之后来到页面最下方点击<code>Generate your Favicons and HTML code</code>，Favicon Generator会自动分辨率生成符合一系列PC和移动终端的图标。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/07.PNG" alt="Favicon Generator生成图标" title="Favicon Generator生成图标"></p>
<p>点击<code>Favicon package</code>下载生成好的图标包。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/08.PNG" alt="Favicon Generator下载图标" title="Favicon Generator下载图标"></p>
<p>将下载好的图标包解压，把里面的文件全部复制到<code>D:\MyBlog\static\</code>目录下。
如果想要替换主页的头像图标，需要替换<code>D:\MyBlog\static\images\avatar.png</code>，推荐分辨率为528*560。</p>
<p>最后整体效果如下图所示。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/09.PNG" alt="博客展示" title="博客展示"></p>
<p><strong>第三步，个性化的博客内容。</strong></p>
<p>博客的最终目的是展示内容，hugo能非常方便的根据文章的设定生成标签(tags)和分类(categories)。下面教大家如何设置文章的模板。</p>
<p><strong>设置博客文章的模板</strong></p>
<p>LoveIt主题中作者已经写好了一个文章模板，这里直接套用这个模板进行修改即可。</p>
<p>首先将<code>D:\MyBlog\themes\LoveIt\archetypesdefault.md</code>文件复制到<code>D:\MyBlog\archetypes</code>目录下，使用VsCode等markdown编辑工具打开。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/10.PNG" alt="模板文件" title="模板文件"></p>
<p><strong>生成一篇博客文章</strong></p>
<p>打开cmd终端，执行如下命令，根据文章模板生成第一篇文章。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback"># 进入D盘
D:
# 进入MyBlog目录
cd MyBlog
# 生成博客文章，文章会生成在content/posts目录下
hugo new posts/我的第一篇博客.md
# 启动hugo，开启监听
hugo server -D --config D:\MyBlog\config.toml
</code></pre></td></tr></table>
</div>
</div><p>再次访问URL:<code>localhost:1313</code>即可看到刚刚添加的文章。</p>
<a class="post-dummy-target" id="5-用github展示博客文章"></a><h1>5 用GitHub展示博客文章</h1>
<p>让GitHub仓库展示博客页面，大致有如下四步。</p>
<ul>
<li>创建一个GitHub账号</li>
<li>创建一个同名仓库</li>
<li>hugo build生成页面</li>
<li>推送到GitHub远程仓库</li>
</ul>
<p><strong>第一步，创建一个GitHub账号。</strong></p>
<p>网上有很多教程，不再赘述。</p>
<p><strong>第二步，创建一个同名仓库</strong></p>
<p>网上也有很多教程，只强调一点，仓库名称为<code>username.github.io</code>。如：你的用户名叫<code>zhangsan000</code>，则你的仓库名必须为<code>zhangsan000.github.io</code>。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/11.PNG" alt="GitHub仓库" title="GitHub仓库"></p>
<p><strong>第三步，hugo生成静态页面。</strong></p>
<p>打开cmd终端，执行如下命令，生成静态页面。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback"># 进入D盘
D:
# 进入MyBlog目录
cd MyBlog
# 生成静态页面
hugo
</code></pre></td></tr></table>
</div>
</div><p>hugo生成静态页面之后在MyBlog目录下会生成public目录存放静态页面。</p>
<p><strong>将静态页面推送到GitHub</strong></p>
<p>打开cmd终端，将GitHub仓库clone到本地。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback"># 查看git是否正常安装，能正常显示git版本即为安装正确
git version

D:
cd MyBlog/pubilc

# 将你的仓库clone下来
git clone repoURL
</code></pre></td></tr></table>
</div>
</div><p>然后将所有文件移动到clone下来的仓库目录下，再次打开cmd终端，输入如下命令，将静态页面推送到远程仓库。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">D:
# 进入git本地仓库
cd MyBlog\public\&lt;你的仓库目录&gt;
# 将所有的文件添加到本地暂存区
git add .
# 提交暂存区的内容
git commit -m &#39;init MyBlog&#39;
# 将本地提交推送到远程
git push
</code></pre></td></tr></table>
</div>
</div><p>在GitHub上查看提交。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/12.PNG" alt="GitHub仓库" title="GitHub仓库"></p>
<p>最后在浏览器上访问URL:<code>&lt;仓库名称&gt;.github.io</code>即可通过网络访问到静态页面。
<img src="https://raw.githubusercontent.com/hts0000/hts0000.github.io/master/images/13.PNG" alt="GitHub仓库" title="GitHub仓库"></p>
        </div>

        <div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>本文于 2020-02-15 更新</span>
            </div>
            <div class="post-info-license">
                
            </div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md">
                
            </div>
            <div class="post-info-share">
                
                    <span></span>
                
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section>
            
                
                    <span class="tag">
                        <a href="https://hts0000.github.io/tags/hugo/"><i class="fas fa-tag fa-fw"></i>hugo</a>
                    </span>
                
                    <span class="tag">
                        <a href="https://hts0000.github.io/tags/%E5%88%86%E4%BA%AB/"><i class="fas fa-tag fa-fw"></i>分享</a>
                    </span>
                
            
        </section>
        <section>
            <span><a href="javascript:window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="https://hts0000.github.io/">主页</a></span>
        </section>
    </div>

    <div class="post-nav">
        
        
            <a href="https://hts0000.github.io/2020/02/hugo%E6%97%A5%E5%B8%B8%E4%BD%BF%E7%94%A8%E4%BC%98%E5%8C%96/" class="next" rel="next" title="Hugo日常使用优化">Hugo日常使用优化<i class="fas fa-angle-right fa-fw"></i></a>
        
    </div>
</div>

        <div class="post-comment">
            
            

            
        </div>
    </article></div>
            </main>
            <footer class="footer">
    <div class="copyright">
        <div class="copyright-line">
            由 <a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a> 强力驱动&nbsp;|&nbsp;主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer">LoveIt<i class="far fa-heart fa-fw"></i></a>
        </div>
        <div class="copyright-line">
            <i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2019 - 2020</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://hts0000.github.io/">hts0000</a></span><span class="license">&nbsp;|&nbsp;<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
    </div>
</footer>


    
    




    
    




    
    





    
    



    
    



    
    





    
    





    
    



    
    





    
    




    
    




    
    



    
    





    
    


<script src="/js/lib/jquery/jquery.slim.min.min.js"></script>
<script src="/js/lib/lazysizes/lazysizes.min.min.js"></script>
<script src="/js/lib/smooth-scroll/smooth-scroll.polyfills.min.min.js"></script><script>window.scroll = new SmoothScroll('[data-scroll]', {speed: 300, speedAsDuration: true});</script>


    
    

    

    

    

    






<script src="/js/blog.min.js"></script>


    
</div>
        <a href="#" class="dynamic-to-top" id="dynamic-to-top" data-scroll><span>&nbsp;</span></a>
    </body>
</html>